<template>
	<view>
		<navbar :config="config" backColor="#000000"></navbar>
		<view class="password-box">
			<u-form :model="form" ref="uForm" label-width="156">
				<u-form-item label="" >
					<u-input v-model.trim="form.payPass" type="number" maxlength="6" @input="changePass"
						placeholder="请输入6位支付密码" placeholder-class="placeholderClass"/>
				</u-form-item>
				<u-form-item label="">
					<u-input v-model="form.captcha" placeholder-class="placeholderClass" placeholder="请输入验证码" />
					<view class="get-code" @click.stop="getCode()">{{ captchaText }}</view>
				</u-form-item>
				<view class="codePhone">验证码将发送至本账号的手机号</view>
			</u-form>
		</view>
		<view class="button">
			<view class="password-btn" @click.stop="setPayPassword()">
				确认提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setUpPaymentPassword,
		getVerifyCodeByParam
	} from "@/api/personal-center.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '设置支付密码',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"
				},
				
				mobile: '',
				captchaText: '获取验证码',
				captchaInterval: null,
				payPasswordLoading: false,
				form: {
					payPass: '',
					captcha: ''
				}
			};
		},
		onShow() {
			this.getUserInfo()
		},
		onUnload() {
			if (uni.getStorageSync('toUrl')) {
				uni.removeStorageSync('toUrl')
			}
		},
		methods: {
			changePass(e) {
				console.log(e, 111)
				if (e) {
					if (e.indexOf('.') != -1) {
						this.form.payPass = e.replace(/\./g, '')
					}
				}
			},
			//获取个人信息
			getUserInfo() {
				let personal = uni.getStorageSync('personal')
				this.mobile = personal ? personal.mobile : '';
			},
			setPayPassword() {
				if (this.payPasswordLoading) {
					return false
				};
				this.payPasswordLoading = true;
				try {
					if (!this.form.payPass) {
						uni.showToast({
							title: '请填写支付密码',
							icon: 'none'
						});
						throw new Error()
					}
					if (this.form.payPass.length < 6) {
						uni.showToast({
							title: '请填写6位支付密码',
							icon: 'none'
						});
						throw new Error()
					}
					if (!this.form.captcha) {
						uni.showToast({
							title: '请填写验证码',
							icon: 'none'
						});
						throw new Error()
					};
					this.$http.put(setUpPaymentPassword, this.form).then(res => {
						uni.showToast({
							title: '支付密码设置成功',
							icon: 'none'
						});
						this.payPasswordLoading = false;
						if (uni.getStorageSync('toUrl')) {
							this.$mUtil.removeCurrenPage()
						}
					}).catch(err => {
						this.payPasswordLoading = false;
					})
				} catch (err) {
					this.payPasswordLoading = false;
				}
			},
			getCode() {
				this.getUserInfo()
				if (!this.mobile) {
					uni.showToast({
						title: '当前账号暂未绑定手机号',
						icon: 'none'
					});
					return false
				}
				if (this.captchaText !== '获取验证码') {
					return false
				}
				this.captchaText = '获取中...'
				try {
					clearInterval(this.captchaInterval)
				} catch {}



				try {
					this.$http.post(getVerifyCodeByParam, {
						mobile: this.mobile,
						verifyCodeType: 2
					}).then(res => {
						let num = 60
						this.captchaInterval = setInterval(() => {
							this.captchaText = `${num}s`;
							num--;
							if (num < 0) {
								clearInterval(this.captchaInterval)
								this.captchaText = '获取验证码'
							}
						}, 1000)
					}).catch(err => {
						this.captchaText = '获取验证码'
					})
				} catch (err) {
					this.captchaText = '获取验证码'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	.password-box {

		

		.u-form {
			/deep/.u-form-item--left__content__label {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #474747;
			}
		}
	}
	
	
	.button{
		width: 100%;
		display: flex;
		justify-content: center;
		// margin: 700rpx 30rpx 0 30rpx;
		position: fixed;
		bottom: 38rpx;
		.password-btn {
			text-align: center;
			width: 673rpx;
			height: 88rpx;
			background: #FF211F;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}

	.get-code {
		// flex-shrink: 0;
		width: 154rpx;
		height: 65rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #FF211F;
		font-size: 23rpx;
		color: #FF211F;
		line-height: 27rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 15rpx;
	}
	/deep/.u-form-item{
		width: 673rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		// padding-top: 34rpx;
		margin-top: 19rpx;
		margin-left: 38rpx;
		padding-left: 19rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	/deep/.u-input__input{
		width:485rpx;
	}
	.codePhone{
		font-weight: 400;
		font-size: 23rpx;
		color: rgba(153,153,153,0.8);
		line-height: 27rpx;
		margin-top: 19rpx;
		margin-left: 38rpx;
	}
	
</style>